<template>
    <div>
        <!-- <img src="../../assets/img/circle.png"/> -->
        <div id="yzMap"></div>
    </div>
</template>
    
    <script>
export default {
    name: 'Tiamditu',
    data() {
        return {
            map: {},
        }
    },
    mounted() {
        setTimeout(() => {
            this.initMap()
        }, 100);
    },
    methods: {
        initMap() {
            // vue项目需要先声明 T = window.T，不然后面无法获取到。
            var T = window.T;
            this.map = new T.Map('yzMap'); // div的id
            // 传参中心点经纬度，以及放大程度，最小1，最大18
            this.map.centerAndZoom(new T.LngLat(108.945837, 34.304258), 12);
            // 7.创建坐标，通常是调取接口获得经纬度
            const point = new T.LngLat(108.945837, 34.304258);
            // 8.创建覆盖使用的图标
            const icon = new T.Icon({
                iconUrl: require('../../assets/img/circle.png'),
                // iconSize: new T.Point(27, 27),
                iconAnchor: new T.Point(10, 25)
            });
            // 9. 创建在该坐标上的一个图像标注实例
            const marker = new T.Marker(point, icon);
            const label = new T.Label({
                text: '水电三局家属院', //文本标注的内容
                position: point, //文本标注的地理位置
                offset: new T.Point(-50, 20) //文本标注的位置偏移值
            })
            // 10.将覆盖物添加到地图中，一个覆盖物实例只能向地图中添加一次
            this.map.addOverLay(marker);
            this.map.addOverLay(label);
        }
    }
}
</script>
    
<style lang="scss" scoped>
#yzMap {
    width: 100%;
    height: 600px;
}
::v-deep .tdt-label{
    color: #333;
    font-size: 12px;
    border:0;
    padding:0px 10px;
    border-radius: 4px;
    box-shadow: 0 6px 12px 2px rgba(0, 0, 0, 0.3);
}
/* ::v-deep .tdt-control-container {
    display: none !important;
} */
</style>
    